<template>
     <div class="login_container">
         <div class="login_box">
                <div class="login_logo">
                    <img src="../assets/logo.png"/>
                </div>
                <el-form :rules="loginRules" label-width="0px" class="loginForm" :model="user" ref="loginForm">
                    <el-form-item prop="username">
                        <el-input type="text" v-model="user.username" prefix-icon="el-icon-user-solid"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" v-model="user.password" prefix-icon="el-icon-s-goods"></el-input>
                    </el-form-item>
                    <el-form-item class="btns">
                        <el-button type="primary" @click="submitForm('loginForm')">登陆</el-button>
                        <el-button type="info" @click="resetBtn">重置</el-button>
                    </el-form-item>
                </el-form>
         </div>
     </div>
</template>
<script>
export default {
    data() {
        return {
            user:{username:"admin","password":"123456"},
             loginRules: {
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                password:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                ]
             }
        }
    },
    methods: {
        resetBtn:function(){
            this.$refs.loginForm.resetFields()
        },
        submitForm(formName) {
            this.$refs[formName].validate(async valid => {
            if (valid) {
                var result=await this.$http.post("/system/user/login",this.user);
                if(result.data.code!==20000){
                      this.$message.error("账号或密码错误");
                }else{
                     this.$message.success("登陆成功");
                     //把token 权限  yonghu角色  以及yong'hu
                     window.sessionStorage.setItem("token",result.data.data.token);
                     window.sessionStorage.setItem("roles",result.data.data.activeUser.roles);
                     window.sessionStorage.setItem("permissions",result.data.data.activeUser.permissions);
                     this.$router.push("/home");
                }
            } else {
                return false;
            }
            });
      },
    },
}
</script>
<style scoped>
.login_container{
    background: #2b4b6b;
    height: 100%;
}
.login_box{
     width: 450px;
     height: 300px;
     background: #fff;
     position: absolute;
     border-radius: 3px;
     left: 50%;
     top: 50%;
     transform: translate(-50%,-50%);
}
.login_logo{
     width: 130px;
     height: 130px;
     border-radius: 50%;
     padding: 10px;
     box-shadow: 0 0 10px #ddd;
     position: absolute;
     left: 50%;
     transform: translate(-50%,-50%);
     background-color: #fff;
     
}
img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #ccc;
 }
 .btns{
     display: flex;
     justify-content: flex-end;
 }
 .loginForm{
      position: absolute;
      bottom: 0;
      width: 100%;
      padding: 0px 20px;
      box-sizing: border-box;
 }
</style>